<!DOCTYPE html> 
<html lang="zh">

<head>
    <meta charset="utf-8"></meta>
    <title>Goldfish's ChatRoom</title>
</head>
<body>
    <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
            crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>
    <div id="root" class="row-cols-1">
        <label for="chat_box">Sent Messages</label>
        <textarea id="chat_box" rows="10" cols="50">
            {%for message in messages%}
                {{message+'\n'}}
            {%endfor%}
        </textarea>
        <form action="/" method="post">
            <fieldset>
                <legend>ChatRoom

                </legend>
                <label for="message_box">Message:
                    <input id="message_box" type="text" name="message" />
                </label>
                <button type="submit" onsubmit="submit()">Send</button>
                
            </fieldset>
            
        </form>
    </div>
    <script>
        const chatBox = document.getElementById('chat_box');
        function submit(){
            fetch("message")
                .then(resp => {resp.json()})
                .then(data => data.forEach(
                    message => chatBox.value += `${message}\n`
                    )
                )
        }
    </script>
</body>
</html>